<template>
  <div class="grid-content">
    <div class="logo-view">
      <logo-view></logo-view>
    </div>
    <div class="report-input">
      <h2 style="margin-bottom: 10px">请选择上报区域:</h2>
      <grid-cascader style="width: 350px"></grid-cascader>
    </div>
    <div class="report-input">
      <h2 style="margin-bottom: 10px">请输入具体地址:</h2>
      <el-input
        v-model="aqiFeedback.address"
        placeholder="请输入具体地址"
        clearable
        type="textarea"
      />
    </div>
    <div class="report-input">
      <h2 style="margin-bottom: 10px">请输入描述信息:</h2>
      <el-input
        v-model="aqiFeedback.information"
        placeholder="请输入描述信息"
        clearable
        type="textarea"
      />
    </div>
  </div>
</template>

<script setup>
import GridCascader from '@/components/utils/GridCascader.vue'
import LogoView from '@/components/login/LogoView.vue'
import { storeToRefs } from 'pinia'
import { useAqiFeedbackStore } from '@/stores/aqi/aqiFeedback.js'

const aqiFeedbackStore = useAqiFeedbackStore()
const { aqiFeedback } = storeToRefs(aqiFeedbackStore)
</script>

<style scoped lang="scss">
.grid-content {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  .logo-view {
    align-items: center;
  }
  .report-input {
    margin-top: 10px;
    margin-left: 20px;
    margin-bottom: 10px;
    width: 350px;
  }
}
</style>
